<template>
  <div class="home">
    <div class="title">commit方式</div>
    <div class="count">count的数值为：{{ count }}</div>
    <el-button @click="handleAdd">+</el-button>
    <el-button @click="handleReduce">-</el-button>
    <div class="count">test的数值为：{{ $store.state.todos.test }}</div>
    mapState
    <br />
    name: {{ name }}
    <br />
    age: {{ age }} <br />
    <hr />
    mapGetters
    <br />
    getCount: {{ getCount }}
    <br />
    getName: {{ getName }}
    <br />
    getAge: {{ getAge }} <br />
    <hr />
    mapMutations
    <br />
    <el-button @click="handleTest">改变test</el-button>
    <br />
    <hr />
    mapActions
    <br />
    <el-button @click="handleCount">改变count</el-button>
    <br />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  name: "HomeIndex",
  data() {
    return {};
  },
  computed: {
    ...mapState(["count", "name", "age"]),
    ...mapGetters(["getCount", "getName", "getAge"]),
  },

  methods: {
    ...mapMutations("todos", ["updateTest"]),
    ...mapActions(["aUpdateCount"]),
    // 加
    handleAdd() {
      this.$store.commit("updateCount", this.$store.state.count + 1);
    },
    // 减
    handleReduce() {
      this.$store.commit("updateCount", this.$store.state.count - 1);
    },
    // 改变test的值
    handleTest(){
      this.updateTest(5)
    },
    // actions方法测试
    handleCount(){
      this.$store.dispatch("aUpdateCount", 7) // 使用.dispatch执行actions方法
      // this.aUpdateCount(7) // 使用mapActions方法
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .count {
    font-size: 16px;
    margin: 20px 0;
  }
}
</style>
